<template>
  <Layout style="height: 100%"
          class="main">
    <Sider hide-trigger
           collapsible
           :width="256"
           :collapsed-width="64"
           v-model="collapsed"
           class="left-sider"
           :style="{overflow: 'hidden'}">
      <side-menu accordion
                 ref="sideMenu"
                 :active-name="$route.name"
                 :collapsed="collapsed"
                 @on-select="turnToPage"
                 :menu-list="menuList">
        <!-- 需要放在菜单上面的内容，如Logo，写在side-menu标签内部，如下 -->
        <div class="logo-con">
          <!-- <img v-show="!collapsed" :src="maxLogo" key="max-logo" />
          <img v-show="collapsed" :src="minLogo" key="min-logo" /> -->
          <span>大粮宝管理平台</span>
        </div>
      </side-menu>
    </Sider>
    <Layout>
      <div class="header-info">
        <div class="header">
          <div class="header-nav">
            <ul class="header-ul">
              <li class="header-li-2">{{ getDate }}</li>
            </ul>
            <div class="header-nav-rigth">
              <ul class="header-ul">
                <li class="header-li-img">
                  <img src="../../static/tinified/images/ico_用户_03.png"
                       alt="">
                </li>
                <li class="header-li-user">用户名23</li>
                <li class="header-li-gang">|</li>
                <li class="header-li-img">
                  <img src="../../static/tinified/images/ico_退出_03.png"
                       alt="">
                </li>
                <li class="header-li-tuichu"
                    @click="quit">
                  <router-link to="/"
                               style="color: #ffffff;">退出</router-link>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="tag-nav-wrapper">
        <tags-nav :value="$route"
                  @input="handleClick"
                  :list="tagNavList"
                  @on-close="handleCloseTag" />
      </div>
      <Header class="header-con">
        <header-bar>
        </header-bar>
      </Header>
      <Content class="main-content-con">
        <Layout class="main-layout-con">
          <Content class="content-wrapper">
            <keep-alive :include="cacheList">
              <router-view />
            </keep-alive>
            <ABackTop :height="100"
                      :bottom="80"
                      :right="50"
                      container=".content-wrapper"></ABackTop>
          </Content>
        </Layout>
      </Content>
    </Layout>
  </Layout>
</template>
<script>
import SideMenu from './components/side-menu'
import HeaderBar from './components/header-bar'
import TagsNav from './components/tags-nav'
import ABackTop from './components/a-back-top'
import ErrorStore from './components/error-store'
import { mapMutations, mapActions, mapGetters } from 'vuex'
import { getNewTagList, routeEqual } from '@/libs/util'
import routers from '@/router/routers'
import minLogo from '@/assets/images/logo-min.jpg'
import maxLogo from '@/assets/images/logo.jpg'
import './main.less'
export default {
  name: 'Main',
  components: {
    SideMenu,
    HeaderBar,
    TagsNav,
    ErrorStore,
    ABackTop
  },
  data () {
    return {
      collapsed: false,
      minLogo,
      maxLogo,
      getDate: '',
      isFullscreen: false
    }
  },
  computed: {
    ...mapGetters([
      'errorCount'
    ]),
    tagNavList () {
      return this.$store.state.app.tagNavList
    },
    tagRouter () {
      return this.$store.state.app.tagRouter
    },
    cacheList () {
      const list = ['ParentView', ...this.tagNavList.length ? this.tagNavList.filter(item => !(item.meta && item.meta.notCache)).map(item => item.name) : []]
      return list
    },
    menuList () {
      return this.$store.getters.menuList
    },
    hasReadErrorPage () {
      return this.$store.state.app.hasReadErrorPage
    }
  },
  methods: {
    ...mapMutations([
      'setBreadCrumb',
      'setTagNavList',
      'addTag',
      'setHomeRoute',
      'closeTag'
    ]),
    turnToPage (route) {
      let { name, params, query } = {}
      if (typeof route === 'string') name = route
      else {
        name = route.name
        params = route.params
        query = route.query
      }
      if (name.indexOf('isTurnByHref_') > -1) {
        window.open(name.split('_')[1])
        return
      }
      this.$router.push({
        name,
        params,
        query
      })
    },
    handleCloseTag (res, type, route) {
      if (type !== 'others') {
        if (type === 'all') {
          this.turnToPage(this.$config.homeName)
        } else {
          if (routeEqual(this.$route, route)) {
            this.closeTag(route)
          }
        }
      }
      this.setTagNavList(res)
    },
    handleClick (item) {
      this.turnToPage(item)
    },
    // 退出登录
    quit () {
      localStorage.setItem('dlb', false)
    },
    // 时间
    formDate () {
      var y = this.$moment().format('YYYY-MM-DD')
      var s = this.$moment().format('HH:mm')
      var day = this.$moment().format('d')
      if (day == 0) {
        day = '星期日'
      } else if (day == 1) {
        day = '星期一'
      } else if (day == 2) {
        day = '星期二'
      } else if (day == 3) {
        day = '星期三'
      } else if (day == 4) {
        day = '星期四'
      } else if (day == 5) {
        day = '星期五'
      } else if (day == 6) {
        day = '星期六'
      }
      this.getDate = `${y}, ${day}, ${s}`
    },
    // 时间定时器
    timer () {
      setInterval(() => {
        this.formDate()
      }, 60 * 1000)
    }
  },
  watch: {
    '$route' (newRoute) {
      const { name, query, params, meta } = newRoute
      this.addTag({
        route: { name, query, params, meta },
        type: 'push'
      })
      this.setBreadCrumb(newRoute)
      this.setTagNavList(getNewTagList(this.tagNavList, newRoute))
      this.$refs.sideMenu.updateOpenName(newRoute.name)
    }
  },
  mounted () {
    /**
     * @description 初始化设置面包屑导航和标签导航
     */
    this.setTagNavList()
    this.formDate()
    this.timer()
    this.setHomeRoute(routers)
    const { name, params, query, meta } = this.$route
    this.addTag({
      route: { name, params, query, meta }
    })
    this.setBreadCrumb(this.$route)
    // 如果当前打开页面不在标签栏中，跳到homeName页
    if (!this.tagNavList.find(item => item.name === this.$route.name)) {
      this.$router.push({
        name: this.$config.homeName
      })
    }
  }
}
</script>
